<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="华立c5119、华立">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="index.js"></script>
</head>
<body>
    <div class="center-content-box">
        <h1>生命游戏</h1>
    </div>
    <div id="table-module" class="center-content-box">

        <!-- 游戏简介 -->
        <div id="game-intro">
            <h2>游戏简介</h2>
            <p>生命游戏(game of life)为1970年由英国数学家J. H. Conway所提出
                某细胞的邻居包括上、下、左、右、左上、左下、右上与右下相邻之细胞 游戏规则如下：</p>
            <p><b>孤单死亡：</b>如果细胞的邻居小于等于1个，则该细胞在下一次状态将死亡；</p>
            <p><b>拥挤死亡：</b>如果细胞的邻居在4个及以上，则该细胞在下一次状态将死亡；</p>
            <p><b>稳定：</b>如果细胞的邻居为2个或3个，则下一次状态为稳定存活；</p>
            <p><b>复活：</b>如果某位置原无细胞存活，而该位置的邻居为2个或3个，则该位置将复活一个细胞。</p>
        </div>

        <div id="table-box">
            <table id="cell-table" border="1">
            </table>
        </div>

        <!-- 操作界面 -->
        <div id="game-operator">
            <div class="text-module">
                <p id="cur-period"><span class="Label">当前周期：</span><span id="period"></span></p>
                <p>
                    <span class="Label">行列数量：</span>
                    <input id="cell-count" type="text" placeholder="整数(0<n<=100)" />
                </p>
                <p><span class="Label">演化速度：</span><input id="speed" type="text" /></p>
                <p title="设置随机分布时的密度"><span class="Label">分布密度：</span><input id="thickness" type="text" /></p>
                <p class="comment">提示：“行列数量” 和 “分布密度” 在点击 “重新布置” 后生效。</p>
            </div>

            <div class="btn-module">
                <div class="btn-box">
                    <p><input id="resetCell" type="button" value="重新布置" /></p>
                    <p><input id="btn-randomSet" type="button" value="随机分布" /></p>
                    <p><input id="next-term" type="button" value="下一周期" /></p>
                    <p><input id="btn-start" type="button" value="开始演化" /></p>
                </div>
            </div>

        </div>
    </div>
    <div id="copy-right">
        <nav class="center-content-box">
            <a href="">作者：陈子豪</a>

            <a href="http://gitee.com/leihouh" target="_blank">Gitee</a>
        </nav>
    </div>
</body>
</html>